<!-- Slider Kit scripts -->
<script type="text/javascript" src="<{$icms_url}>/modules/album/scripts/jquery.sliderkit.1.9.2.pack.js"></script>
<script type="text/javascript" src="<{$icms_url}>/modules/album/scripts/sliderkit.imagefx.1.0.pack.js"></script>
<!-- Slider Kit styles -->
<link rel="stylesheet" type="text/css" href="<{$icms_url}>/modules/album/scripts/sliderkit-core.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="<{$icms_url}>/modules/album/scripts/sliderkit-demos.css" media="screen, projection" />

<{* single horizontal image *}>
<{if $block.horizontal == 1}>
	<!-- Slider Kit launch -->
	<script type="text/javascript">
		$(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility
			// Photo slider > Minimal
			$(".photoslider-mini").sliderkit({
				<{if $block.autoscroll}>
					auto:true,
				<{else}>
					auto:false,
				<{/if}>
				width:<{$block.display_width}>,
				height:<{$block.display_height}>,
				
				autospeed:3000,
				panelbtnshover:true,
				circular:true,
				fastchange:false
			});
		});
	</script>
	
	<div class="sliderkit photoslider-mini" style="width:<{$block.display_width}>px;height:<{$block.display_height}>px;">
		<div class="sliderkit-panels">
			<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a href="#" title="<{$smarty.const._PREV}>"><span><{$smarty.const._PREV}></span></a></div>
			<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a href="#" title="<{$smarty.const._NEXT}>"><span><{$smarty.const._NEXT}></span></a></div>
			
			<{foreach item=image from=$block.album_images}>
				<div class="sliderkit-panel">
					<a title="<{$image.title}>">
						<img class="" src="<{$image.img}>" alt="<{$image.title}>" />
					</a>
				</div>
			<{/foreach}>
		</div>
	</div>

<{* horizontal Gallery block *}>
<{elseif $block.horizontal == 2}>
	<!-- Slider Kit launch -->
	<script type="text/javascript">
		$(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility
			// Photo gallery > With captions
			$(".photosgallery-captions").sliderkit({
				mousewheel:false,
				keyboard:true,
				shownavitems:3,
				<{if $block.autoscroll}>
					auto:true,
				<{else}>
					auto:false,
				<{/if}>
				delaycaptions:true
			});
		});
	</script>
	
	<script type="text/javascript" src="<{$icms_url}>/modules/album/scripts/sliderkit.delaycaptions.1.1.pack.js"></script>
	<!-- Start photosgallery-captions -->
	<div class="sliderkit photosgallery-captions" style="width:<{$block.display_width}>px;">
		<div class="sliderkit-nav">
			<div class="sliderkit-nav-clip">
				<ul>
					<{foreach item=image from=$block.album_images}>
						<li>
							<a href="#img-<{$image.id}>" rel="nofollow" title="<{$image.title}>">
								<img class="" src="<{$image.thumb}>" alt="<{$image.title}>" />
							</a>
						</li>
					<{/foreach}>
				</ul>
			</div>
			<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a rel="nofollow" href="#" title="Previous line"><span>Previous line</span></a></div>
			<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a rel="nofollow" href="#" title="Next line"><span>Next line</span></a></div>
			<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous photo"><span><{$smarty.const._PREV}></span></a></div>
			<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next photo"><span><{$smarty.const._NEXT}></span></a></div>
		</div>
		<div class="sliderkit-panels">
			<{foreach item=image from=$block.album_images}>
				<div class="sliderkit-panel" style="width:auto; margin: 0 auto;" id="img-<{$image.id}>">
					<img class="resizeme" src="<{$image.img}>" alt="<{$image.title}>" />
					<div class="sliderkit-panel-textbox">
						<div class="sliderkit-panel-text">
							<h4><{$image.title}></h4>
							<{if $block.img_dsc}>
								<p><{$image.dsc}></p>
							<{/if}>
						</div>
						<div class="sliderkit-panel-overlay" style="width:<{$block.display_width}>px;"></div>
					</div>
				</div>
			<{/foreach}>
		</div>
	</div>

<{* single vertical image *}>
<{elseif $block.horizontal == 3}>
	<!-- Slider Kit launch -->
	<script type="text/javascript">
		$(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility
			// Photo slider
			$("#photoslider-vertical").sliderkit({
				<{if $block.autoscroll}>
					auto:true,
				<{else}>
					auto:false,
				<{/if}>
				width:<{$block.display_width}>,
				height:<{$block.display_height}>,
				circular:true,
				shownavitems:1,
				navfx:"none",
				panelfx:"sliding",
				panelfxspeed:3000,
				
				mousewheel:true,
				verticalnav:true,
				verticalslide:true
			});
		});
	</script>
	
	<div id="photoslider-vertical" class="sliderkit">
		<div class="sliderkit-nav">
			<div class="sliderkit-nav-clip">
				<ul>
					<{foreach item=image from=$block.album_images}>
						<li><{$image.title}></li>
					<{/foreach}>
				</ul>
			</div>
			<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a href="#" title="<{$smarty.const._PREV}>"><span><{$smarty.const._PREV}></span></a></div>
			<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a href="#" title="<{$smarty.const._NEXT}>"><span><{$smarty.const._NEXT}></span></a></div>
		</div>
		<div class="sliderkit-panels">
			<{foreach item=image from=$block.album_images}>
				<div class="sliderkit-panel">
					<a title="<{$image.title}>">
						<img class="resizeme" src="<{$image.img_path}>" alt="<{$image.title}>" />
					</a>
				</div>
			<{/foreach}>
		</div>
	</div>

<{* vertical gallery block *}>
<{elseif $block.horizontal == 4}>
	<!-- Slider Kit launch -->
	<script type="text/javascript">
		$(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility
			// Photo gallery > Vertical
			$(".photosgallery-vertical").sliderkit({
				circular:true,
				mousewheel:true,
				shownavitems:4,
				verticalnav:true,
				navclipcenter:true,
				<{if $block.autoscroll}>
					auto:true
				<{else}>
					auto:false
				<{/if}>
			});
		});
	</script>
	<script type="text/javascript" src="<{$icms_url}>/modules/album/scripts/sliderkit.delaycaptions.1.1.pack.js"></script>
	<div class="sliderkit photosgallery-vertical">
		<div class="sliderkit-nav">						
			<div class="sliderkit-nav-clip">
				<ul>
					<{foreach item=image from=$block.album_images}>
						<li>
							<a href="#img-<{$image.id}>" rel="nofollow" title="<{$image.title}>">
								<img class="" src="<{$image.thumb}>" alt="<{$image.title}>" />
							</a>
						</li>
					<{/foreach}>
				</ul>
			</div>
			<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a rel="nofollow" href="#" title="<{$smarty.const._PREV}>"><span><{$smarty.const._PREV}></span></a></div>
			<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a rel="nofollow" href="#" title="<{$smarty.const._NEXT}>"><span><{$smarty.const._NEXT}></span></a></div>
		</div>
		<div class="sliderkit-panels" style="padding-left: 95px;">
			<{foreach item=image from=$block.album_images}>
				<div class="sliderkit-panel" style="width:<{$block.display_width}>px;height:<{$block.display_height}>px;" id="img-<{$image.id}>">
					<img class="resizeme" src="<{$image.img}>" alt="<{$image.title}>" />
					<div class="sliderkit-panel-textbox">
						<div class="sliderkit-panel-text">
							<h4><{$image.title}></h4>
							<{if $block.img_dsc}>
								<p><{$image.dsc}></p>
							<{/if}>
						</div>
						<div class="sliderkit-panel-overlay" style="width:<{$block.display_width}>px;"></div>
					</div>
				</div>
			<{/foreach}>
		</div>
	</div>
	
<{* carousel block *}>
<{elseif $block.horizontal == 5}>

	<{* carousel block with image description *}>
	<{if $block.img_dsc}>
		<!-- Slider Kit launch -->
		<script type="text/javascript">
			$(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility
				// Carousel > Demo #2
				$("#carousel-demo5").sliderkit({
					shownavitems:3,
					circular:false,
					fastchange:false,
					scrolleasing:"easeOutExpo", //"easeOutBounce, easeOutBack"
					scrollspeed:500,
					<{if $block.autoscroll}>
						auto: true,
						autospeed:4000
					<{else}>
						auto:false
					<{/if}>
				});
			});
		</script>
		
		<div id="carousel-demo5" class="sliderkit">
			<div class="sliderkit-nav">
				<div class="sliderkit-nav-clip">
					<ul>
						<{foreach item=image from=$block.album_images}>
							<li style="overflow-y: auto;">
								<a href="#" rel="nofollow" title="<{$image.title}>">
									<img class="" src="<{$image.thumb}>" alt="<{$image.title}>" />
								</a>
								<h3><{$image.title}></h3>
								<p><{$image.dsc}></p>
							</li>
						<{/foreach}>
					</ul>
				</div>
				<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a href="#" title="Scroll to the left"><span><{$smarty.const._PREV}></span></a></div>
				<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a href="#" title="Scroll to the right"><span><{$smarty.const._NEXT}></span></a></div>
			</div>
		</div>
	
	<{* carousel block without description *}>
	<{else}>
		<!-- Slider Kit launch -->
		<script type="text/javascript">
			$(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility
				// Carousel > Demo #2
				$(".carousel-demo2").sliderkit({
					<{if $block.autoscroll}>
						auto:true,
						shownavitems:3,
						scroll:1,
						mousewheel:true,
						circular:true,
						start:2
					<{else}>
						auto:false,
						circular:true,
						shownavitems:5,
						scroll:1,
						navcontinuous: true,
						scrollspeed: 700,
						scrolleasing: "linear"
					<{/if}>
				});
			});
		</script>
		
		<div class="sliderkit carousel-demo2">
			<div class="sliderkit-nav">
				<div class="sliderkit-nav-clip">
					<ul>
						<{foreach item=image from=$block.album_images}>
							<li>
								<a href="#" rel="nofollow" title="<{$image.title}>">
									<img class="" src="<{$image.thumb}>" alt="<{$image.title}>" />
								</a>
							</li>
						<{/foreach}>
					</ul>
				</div>
				<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a href="#" title="Scroll to the left"><span><{$smarty.const._PREV}></span></a></div>
				<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a href="#" title="Scroll to the right"><span><{$smarty.const._NEXT}></span></a></div>
			</div>
		</div>
	<{/if}>
<{/if}>